// 双向绑定
<template>
    <div>
        <!-- label的作用是为input元素提供一个提示信息，当用户输入时，label会自动消失。 -->
        <div>
        <label for="">请输入姓名</label>
        <input type="text" v-model="name">
        </div>

        <div>
        <label for="">请输入年龄</label>
        <input type="text" v-model="age">
        </div>

        <div>
        <label for="">请选择性别</label>
        <input type="radio" v-model="sex">
        </div>
<label for="">请选择爱好</label>
        <div>
        <input type="checkbox" value="游泳"   v-model="fav">
        <input type="checkbox" value="打球"   v-model="fav">
        <input type="checkbox" value="健身"   v-model="fav">
        </div>
        <div>

        <h1>:{{ name+"今年"+age }}</h1>

        </div>
       
    </div>

</template>

<script>
const options={
    data:function(){
        return {
            name:'张三',age:18,sex:'男',fav:['打篮球']
        };
    },
    // methods: {
    //     m1() {
    //         return this.name+"今年"+this.age;
    //     }
    // },
    // 将methods中的方法改成computed中的方法
    // computed中的方法是计算属性
    // 计算属性的作用是当数据发生变化时
    // 计算属性会自动重新计算。
    // m2被当成了属性，而不是方法。
    // 计算属性的作用是当数据发生变化时，计算属性会自动重新计算。否则不会重新计算。
    computed:{
        m2(){
            return this.name+"今年"+this.age; 
        }
    }
};
export default options;
</script>